<template>
  <div class="main" style="width: 100%; padding: 5px">
    <el-carousel
      indicator-position="outside"
      :interval="4000"
      height="300px"
      type="card"
    >
      <el-carousel-item
        class="notice-item"
        style="height: 100%"
        v-for="item in noticeList"
        :key="item.noticeId"
      >
        <el-image
          style="width: 100%; height: 100%"
          :src="item.noticeImg"
          @click.stop="openDialog(item)"
        />
        <div class="title">
          {{ item.title }}
        </div>
      </el-carousel-item>
    </el-carousel>

    <el-card class="box-card" shadow="always" v-loading="loading">
      <template #header>
        <div class="card-header">
          <div class="title">
            <el-icon
              style="transform: translateY(4px); margin-right: 6px"
              size="20px"
              ><Tickets
            /></el-icon>
            <span>学校公告</span>
          </div>

          <el-button class="button" text @click="handleQuery">
            <template #icon>
              <el-icon><Refresh /></el-icon>
            </template>
          </el-button>
        </div>
      </template>
      <div v-if="total !== 0">
        <div class="notice-box">
          <div
            class="item"
            v-for="(item, index) in noticeList"
            :key="index"
            @click.stop="openDialog(item)"
          >
            <div class="label">
              <div class="dot"></div>
              <div class="content">{{ item.content }}</div>
            </div>
            <div class="item">{{ item.createTime }}</div>
          </div>
        </div>
      </div>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
      <el-empty v-else description="暂无公告" />
    </el-card>

    <NoticeDetail ref="detail" />
  </div>
</template>

<script setup lang="ts">
import { Refresh } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { INotice, IPage } from "@/api/business/notice/types";
import { getPageNoticeAPI } from "@/api/business/notice";
import NoticeDetail from "@/views/dashboard/components/student/components/home-notice/notice-detail.vue";
import { Tickets } from "@element-plus/icons-vue";

const detail = ref();
const loading = ref(false);
const noticeList = ref<INotice[] | null>([]);
const total = ref<number>(0);
const queryParams = reactive<IPage>({
  pageNum: 1,
  pageSize: 5,
  student: true,
});
onMounted(() => {
  handleQuery();
});

// 获取公告列表
function handleQuery() {
  loading.value = true;
  getPageNoticeAPI(queryParams)
    .then(({ data }) => {
      noticeList.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

const openDialog = (info) => {
  detail.value.showDialog(info);
};
</script>

<style scoped lang="scss">
.main {
  .notice-item {
    position: absolute;
    .title {
      position: absolute;
      bottom: 0;
      z-index: 10;
      width: 100%;
      color: #fff;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.1);
    }
  }
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
  border: 1px solid rgb(235, 196, 196);
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      background-color: #a53233;
      padding: 6px 10px;
      font-size: 20px;
      color: #fff;
    }
  }
  .notice-box {
    padding: 0 32px;
    .item {
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #959393;
      .label {
        display: flex;
        align-items: center;
        flex: 1;
        .content {
          color: #1f1f1f;
          width: 100%;
          margin-right: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .dot {
          margin-right: 10px;
          display: inline-block;
          width: 10px;
          height: 10px;
          background-color: #959393;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
